<template>
	<view v-if="orderinfo" style="font-size: 15px;">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map" style="width: 100%; height: 350px;" :latitude="latitude" :longitude="longitude" :markers="covers"
				:polyline="polyline"  :scale="8">
				</map>
			</view>
		</view>
		<view style="position: relative;
		height: 75vh;">
			<view>
				<view class="kuaidi-name" v-if="orderinfo.trackingNumber">
					<view class="name-1">
						<uni-icons v-if="orderinfo.trackingPlatform=='中通'" custom-prefix="iconfont" type="icon-zhongtong" size="20" color="dodgerblue"></uni-icons>
						<uni-icons v-if="orderinfo.trackingPlatform=='京东物流'"  custom-prefix="iconfont" type="icon-jingdongwuliu" size="20"></uni-icons>
						<uni-icons v-if="orderinfo.trackingPlatform=='中国邮政'"  custom-prefix="iconfont" type="icon-zhongguoyouzheng" size="20"></uni-icons>
						<uni-icons v-if="orderinfo.trackingPlatform=='邦选'"  custom-prefix="iconfont" type="icon-bangxuanlogo" size="20"></uni-icons>
						<uni-icons v-if="orderinfo.trackingPlatform=='顺风'"  custom-prefix="iconfont" type="icon-erwei_shunfeng" size="20"></uni-icons>
						<uni-icons v-if="orderinfo.trackingPlatform=='极兔速递'"  custom-prefix="iconfont" type="icon-jitusudilogo" size="20"></uni-icons>
						<text>{{orderinfo.trackingPlatform}}</text>
						<text>{{orderinfo.trackingNumber}}</text>
					</view>
					<view  class="name-2">
						<text @click="copyBtn">复制</text>
						<text @click="callphoneBtn">打电话</text>
					</view>
				</view>
				<view class="step">
					<uv-read-more show-height="200rpx" :toggle="true" closeText="查看更多物流明细" openText="收起更多物流明细" color="#999">
						<uv-steps current="0" direction="column"  active-color="#ff5500" inactive-color="#999" dot="true">
							<uv-steps-item v-for="(item,index) in listlogisticsList" :key="index" customStyle="margin-bottom:5px;font-size:15px">
								<template v-slot:title>
									<text style="margin-right: 8px;font-weight: bold;color:#ff5500"  v-if="item.logisticsStatus == '0'">已下单</text>
									<text  style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '1'">已发货</text>
									<text style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '2'">已揽件</text>
									<text style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '3' && item.lastYunShu==true">运输中</text>
									<text style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '4'">派送中</text>
									<text style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '5'">待取件</text>
									<text style="margin-right: 8px;font-weight: bold;"  v-if="item.logisticsStatus == '6'">已取件</text>
									<text style="margin-right: 8px;font-weight: bold;font-size: 12px;"  :style="index == 0 ? 'color:#ff5500':''">
										{{formatTimestamp(item.createTime)}}
									</text>
								</template>
								<template v-slot:desc>
									<text style="font-size: 12px;margin-top: 5px;color: gray;"> {{item.desc}}</text>
								</template>
							</uv-steps-item>
						</uv-steps>	
					</uv-read-more>
				</view>
			</view>
			<view class="positions">
				<uni-icons type="location" size="22" style="margin-top: 5px;"></uni-icons>
				<view class="address">
					<text>送至  {{orderaddress.address}}{{orderaddress.detailAddress}}</text>
					<text style="color: gray;font-size: 12px;">{{orderaddress.name}} {{orderaddress.phone}}</text>
				</view>
			</view>
			<view class="order">
				<view class="shop" @click="goShop(orderinfo.shopId)">
					<view class="shopname">
						<text>{{orderinfo.shopName}}</text>
						<uni-icons type="right" size="20" color="gray"></uni-icons>
					</view>
					<text class="status"  v-if="orderinfo.orderStatus == 4">交易成功</text>
				</view>
				<view v-if="orderinfo.carts"  v-for="(item,index) in orderinfo.carts">
					<view class="ordertail"  @click.stop="gotoGoodInfo(item.goodsId)">
						<image :src="item.mainImage" style="border-radius: 5px;"></image>
						<view>
							<view class="goodname">{{item.goodsName}}</view>
							<view  style="padding: 0;margin: 0;"  v-if="item.productSpecificationsDesc" v-for="(spec,indexspec) in item.productSpecificationsDesc">{{spec}}</view>
							<view class="remark">
								<text>退货包运费</text>
								<text>假一赔四</text>
							</view>
						</view>
						<view class="price2">
							<el-text style="color: black;">¥ {{item.unitPrice}}</el-text>
							<el-text>x {{item.quantity}}</el-text>
						</view>
					</view>
					<view class="btn">
						<button size="mini"  style="color: coral;width: auto;margin-right: 10px;"  @click="chartBtn('cart',item)">加入购物车</button>
					</view>
				</view>
				<view v-else>
					<view class="ordertail"  @click.stop="gotoGoodInfo(orderinfo.goodsId)">
						<image  :src="orderinfo.mainImage"  mode="aspectFill"  style="border-radius: 5px;width: 50%;height: 100px;"></image>
						<view>
							<view class="goodname">{{orderinfo.goodsName}}</view>
							<view  style="padding: 0;margin: 0;"  v-if="orderinfo.productSpecificationsList"  v-for="(spec,indexspec) in orderinfo.productSpecificationsList">{{spec}}</view>
							<view class="remark" v-if="false">
								<text>退货包运费</text>
								<text>假一赔四</text>
							</view>
						</view>
						<view class="price2">
							<el-text style="color: black;">¥ {{orderinfo.placeOrderUnitPrice}}</el-text>
							<el-text>x {{orderinfo.placeOrderQuantity}}</el-text>
						</view>
					</view>
					<view class="btn">
						<button size="mini"  style="color: coral;width: auto;margin-right: 10px;"  @click="chartBtn('order',orderinfo)">加入购物车</button>
					</view>
				</view>
				<view>
					<view class="infotitle">
						<text>合计</text>
						<text>{{orderinfo.realTotalMoney}}</text>
					</view>
					<view  class="infotitle">
						<text>订单编号</text>
						<text class="intocontent">{{orderinfo.orderNo}}</text>
					</view>
					<view  class="infotitle">
						<text style="width:30%">收货信息</text>
						<text class="intocontent"><text>{{orderaddress.name}}</text>，<text>{{orderaddress.phone}}</text>，<text>{{orderaddress.address}}{{orderaddress.detailAddress}}</text></text>
					</view>
					<view  class="infotitle">
						<text>交易号</text>
						<text class="intocontent">{{orderinfo.transactionNumber}}</text>
					</view>
					<view  class="infotitle">
						<text>创建时间</text>
						<text class="intocontent">{{formatTimestamp(orderinfo.createTime)}}</text>
					</view>
					<view  class="infotitle">
						<text>付款时间</text>
						<text class="intocontent">{{formatTimestamp(orderinfo.successTime)}}</text>
					</view>
					<view  class="infotitle">
						<text>发货时间</text>
						<text class="intocontent">2025-12-12 00:00:00</text>
					</view>
					<view  class="infotitle">
						<text>成交时间</text>
						<text class="intocontent">2025-12-12 00:00:00</text>
					</view>
				</view>
				</view>
				</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onReady } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
import {info} from '@/api/order.ts'
import {formatTimestamp} from '@/utils/date.ts'
import {baseUrl} from '@/api/request.ts'
import {saveComment} from '@/api/ordercomment.ts'
import {save} from '@/api/shoppingcart.ts'
import {listlogistics} from '@/api/logistics.ts'
import {infoReceive} from '@/api/receiveaddress.ts'
	const orderaddress=ref()
	const getOrderAddress=(id)=>{
		infoReceive(id).then(res=>{
			orderaddress.value=res.data
		})
	}
	onLoad((options)=>{
		getOrderInfo(options.id)
	})
	
	const chartBtn=(type,item)=>{
		console.log("2222",type,item)
		if(type == 'cart'){
			save({"goodsId":item.goodsId,"quantity":item.quantity,"productSpecificationsIds":item.productSpecificationsIds,
					"totalPrice":item.totalPrice,"unitPrice":item.unitPrice});
		}else if(type == 'order'){
			save({"goodsId":item.goodsId,"quantity":item.placeOrderQuantity,"productSpecificationsIds":item.productSpecificationsIds,
					"totalPrice":item.placeOrderQuantity * item.placeOrderUnitPrice,"unitPrice":item.placeOrderUnitPrice});
		}else if(type == 'all'){
			if(item.carts){
				item.carts.forEach(cart=>{
					save({"goodsId":cart.goodsId,"quantity":cart.quantity,"productSpecificationsIds":cart.productSpecificationsIds,
							"totalPrice":cart.totalPrice,"unitPrice":cart.unitPrice});
				})
			}else{
				save({"goodsId":item.goodsId,"quantity":item.placeOrderQuantity,"productSpecificationsIds":item.productSpecificationsIds,
						"totalPrice":item.placeOrderQuantity * item.placeOrderUnitPrice,"unitPrice":item.placeOrderUnitPrice});
			}
		}
		
		uni.switchTab({
			 url:'/pages/chart/index'
		})
	}
	
	const orderinfo=ref()
	const getOrderInfo=(id)=>{
		info(id).then(res=>{
			orderinfo.value=res.data;
			if(orderinfo.value.carts){
				getOrderAddress(orderinfo.value.carts[0].receivingAddressId)
			}else{
				getOrderAddress(orderinfo.value.receivingAddressId)
			}
			getlistlogistics()
		})
	}
	const longitude=ref(108.934843)	
	const latitude=ref(34.263734)
	const listlogisticsList=ref([])
	const getlistlogistics=()=>{
		listlogistics({"orderId":orderinfo.value.id}).then(res=>{
			listlogisticsList.value=res.data
			coordinate.value=[]
			covers.value=[]
			listlogisticsList.value.forEach(item=>{
				if(!item.latitudeLongitude){
					return
				}
				const val=item.latitudeLongitude
				const array=val.split(",")
				const text=ref('')
				if(item.logisticsStatus=='0'){
					text.value='已下单'
				}else if(item.logisticsStatus=='1'){
					text.value='已发货'
				}else if(item.logisticsStatus=='2'){
					text.value='已揽件'
				}else if(item.logisticsStatus=='3'){
					text.value='运输中'
				}else if(item.logisticsStatus=='4'){
					text.value='派送中'
				}else if(item.logisticsStatus=='5'){
					text.value='待取件'
				}else if(item.logisticsStatus=='6'){
					text.value='已取件'
				}
				const form={
					latitude: parseFloat(array[0]) ,
					longitude: parseFloat(array[1]),
					problem: false,
					place:item.place,
					text:text.value
				}
				coordinate.value.push(form)
			})
			if(coordinate.value.length > 0){
				
				longitude.value=parseFloat(coordinate.value[0].longitude)
				latitude.value=parseFloat(coordinate.value[0].latitude)
				
				polyline.value=[{
					points:coordinate.value,
					color: '#00aaff',
					width:3,
					dottedLine:false
				}]
				covers.value=
					[{
						id: 1,
						width: 30,
						height: 30,
						latitude:parseFloat(coordinate.value[0].latitude),
						longitude: parseFloat(coordinate.value[0].longitude),
						iconPath: '../../static/logo.png',
						callout: {
							content: coordinate.value[0].text+": "+coordinate.value[0].place, // 车牌信息
							display: "ALWAYS",
							fontWeight: "bold",
							color: "#000000", //文本颜色
							fontSize: "12px",
							bgColor: "#ffffff", //背景色
							padding: 8, //文本边缘留白
							textAlign: "center",
							borderRadius:4
						},
						anchor: {
							x: 0.5,
							y: 0.5,
						},
					},{
						id: 2,
						width: 30,
						height: 30,
						latitude: parseFloat(coordinate.value[coordinate.value.length-1].latitude),
						longitude: parseFloat(coordinate.value[coordinate.value.length-1].longitude),
						iconPath: '../../static/logo.png',
						callout: {
							content: "发:"+coordinate.value[coordinate.value.length-1].place, // 车牌信息
							display: "ALWAYS",
							fontWeight: "bold",
							color: "#000000", //文本颜色
							fontSize: "12px",
							bgColor: "#ffffff", //背景色
							padding: 8, //文本边缘留白
							textAlign: "center",
							borderRadius:4
						},
						anchor: {
							x: 0.5,
							y: 0.5,
						},
					},
					]
			}
		})
	}
	const goGoodDetail=(item)=>{
		if(item.carts){
			uni.navigateTo({
				url:"/pages/shop/index?id="+item.shopId
			})
		}else{
			uni.navigateTo({
				url:"/pages/goods/detail?id="+item.goodsId
			})
		}
	}
	const copyBtn=()=>{
		// 复制文本到剪贴板
		uni.setClipboardData({
		    data: '要复制的文本',
		    success: function () {
		        uni.showToast({
		            title: '复制成功',
		            icon: 'success'
		        });
		    },
		    fail: function () {
		        uni.showToast({
		            title: '复制失败',
		            icon: 'none'
		        });
		    }
		});
	}
	const callphoneBtn=()=>{
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}
	const steps=ref([
	])
	const title=ref('map')
	const polyline=ref([
	])
	const map=ref(null)
	onReady(()=>{
		map.value=uni.createMapContext('map');
	})
	onMounted(()=>{
		polyline.value=[{
			points:coordinate.value,
			color: '#00aaff',
			width:3,
			dottedLine:false
		}]
	})
	const  coordinate=ref([])
	const covers=ref([])	
	const goShop=(id)=>{
		uni.navigateTo({
			url:"/pages/shop/index?id="+id
		})
	}
	const gotoGoodInfo=(id)=>{
		uni.navigateTo({
		  url:'/pages/goods/detail?id='+id,
		})
	}
	
	
</script>

<style scoped>
	.inputcomment{
		position: relative;
	}
	.xingxing{
		padding: 20px;
		background-color: #dedede;
	}
	.comment-icon{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 14px;
		margin-bottom: 10px;
		color: gray;
	}
	
	.positions{
		padding: 10px;
		margin-top: 2px;
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
		border: 0.5px solid #ececec;
	}
	.address{
		margin-left: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.address text{
		margin-top: 5px;
	}
	.step{
		padding: 10px;
	}
	.name-1{
		width: 60%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.name-2{
		width: 40%;
		display: flex;
		justify-content: space-evenly;
	}
	.kuaidi-name{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		color: gray;
	}
	.bottom-detail{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		border: 1px solid lightgray;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: white;
	}
	.btn{
		width: 100%;
		text-align: right;
		padding-right: 15px;
		display: flex;
		align-items: center;
	}
	.intocontent{
		color: lightgray;
		text-align: right;
	}
	.infotitle{
		margin-top: 5px;
		display: flex;justify-content: space-between;padding: 5px;
	}
	.price2{
		display: flex;
		flex-direction: column;
		text-align: right;
		width: 30%;
		padding-right: 6px;
	}
	.goodname{
		color: black;
		font-weight: bold;
	}	
	.remark{
		display: flex;
		justify-content: space-between;
		color: coral;
	}
	.ordertail image{
		width: 90px;
		height: 90px;
	}	
	.order view{
		margin-bottom: 8px;
		margin-left: 5px;
	}
	.order{
		margin-top: 10px;
	}
	.more{
		width:10%;
	}
	.btn2{
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.price{
		text-align: right;
		color: black;
	}
	.ordertail{
		display: flex;
		justify-content: space-evenly;
	}
	.shop{
		display: flex;justify-content: space-between;
		align-items: center;
	}
	.shopname{
		display: flex;align-items: center;justify-content: space-evenly;
		color: black;
	}
	.status{
		color: coral;
	}
</style>